<html>

<head>
    <style>

        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: lightgrey;
        }
    </style>

    <script>

        const $ = require("jquery");
        const {MouseTracer} = require("../../../web/js/mouse/MouseTracer");
        const {Elements} = require("../../../web/js/util/Elements");
        const {FrameEvents} = require("../../../web/js/viewer/html/FrameEvents");


        function iframeLoaded() {

            console.log("iframe loaded");

            new MouseTracer(document).start();

            let iframe = document.querySelector("iframe");

            if(! iframe) {
                throw new Error("no iframe")
            }

            //new MouseTracer(iframe.contentDocument).start();

            iframe.contentDocument.body.addEventListener("click", mouseEvent => {

                let calculatedPoints = FrameEvents.calculatePoints(iframe, mouseEvent);

                console.log("calculatedPoints: ", calculatedPoints);

            });

        }

    </script>

</head>

<body>

<p>

<div style="width: 100%;">

    <div style="margin-left: 50px; margin-top: 50px;">
        <iframe src="iframe.html"
                onload="iframeLoaded();"
                style="width: 500px; height: 2000px; margin-left: 100px; margin-top: 100px; transform: scale(1.0); transform-origin: center 0;" frameborder="0"></iframe>
    </div>

</div>

</p>

</body>

</html>
